<template>
    <div style="padding: 10px">
        <!--    功能区域-->
        <div style="margin: 10px 0">
            <el-button type="primary" @click="add">新增</el-button>
            <el-button type="primary">导入</el-button>
            <el-button type="primary">导出</el-button>
        </div>

        <!-- 搜索区域 -->
        <div style="magin: 10px 0">
            <el-input v-model="search" placeholder="请输入关键词" style="width: 30%" clearable></el-input>
            <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
            <el-table-column
                    prop="sid"
                    label="SID"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    prop="staffName"
                    label="员工姓名">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="cartId"
                    label="身份证">
            </el-table-column>
            <el-table-column
                    prop="department"
                    label="部门">
            </el-table-column>
            <el-table-column
                    prop="workDay"
                    label="在职天数">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="电子邮箱">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" size="mini" color="turquoise">编辑</el-button>
                    <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.sid)">
                        <template #reference>
                            <el-button size="mini" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
            <el-pagination
                    :current-page="currentPage"
                    :page-sizes="[5, 10,20]"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>

            <el-dialog title="提示" v-model="dialogVisible" width="30%">
                <el-form :model="form" lable-width="120px">
                    <el-form-item label="员工姓名">
                        <el-input v-model="form.staffName" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="form.cartId" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-input type="" v-model="form.department" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="form.sex" label="男">男</el-radio>
                        <el-radio v-model="form.sex" label="女">女</el-radio>
                        <el-radio v-model="form.sex" label="未知">未知</el-radio>
                    </el-form-item>
                    <el-form-item label="在职天数">
                        <el-input type="" v-model="form.workDay" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input type="" v-model="form.phone" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input type="" v-model="form.email" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible=false">取消</el-button>
                  <el-button type="primary" @click="save">确定</el-button>
              </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>

    import request from "../utils/request";

    export default {
        name: 'Home',
        components: {

        },
        data(){
            return{
                form: {},
                dialogVisible: false,
                search:'',
                total: 0,
                currentPage:1,
                pageSize:10,
                tableData:[]
            }
        },
        //注意这里的created是写在methods外面的，前端基础没有容易出问题的。
        created(){
            this.load()
        },
        methods:{
            handleEdit(row){
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true

            },
            handleSizeChange(pageSize){ //改变当前每页的个数触发
                this.pageSize = pageSize;
                this.load()
            },
            handleCurrentChange(pageNum){  //改变当前页码触发
                this.currentPage = pageNum;
                this.load()
            },

            handleDelete(sid){

                request.delete("/staff/"+sid).then(res=> {
                    if (res.code === '0'){
                        this.$message({
                            type:"success",
                            message:"删除成功"
                        })
                    } else {
                        this.$message({
                            type:"error",
                            message: res.msg
                        })
                    }
                    this.load()     //一般对表的操作都不要忘记加载一下页面
                })
            },
            add(){
                this.dialogVisible= true;
                this.form = {}

            },
            //  提交要保存的数据
            save(){
                if(this.form.sid){   //有id存在则更新
                    request.put("/staff",this.form).then(res =>{
                        console.log(res)
                        //下面三个等于号是值和类型都相等的意思
                        if (res.code === '0'){
                            this.$message({
                                type:"success",
                                message:"更新成功"
                            })
                        } else {
                            this.$message({
                                type:"error",
                                message: res.msg
                            })
                        }
                        //更新成功后要刷新一下主页
                        this.load()
                        //关闭弹窗
                        this.dialogVisible = false
                    })
                }   else{           //无id存在则新建
                    request.post("/staff",this.form).then(res =>{
                        console.log(res)
                        if (res.code === '0'){
                            this.$message({
                                type:"success",
                                message:"新增成功"
                            })
                        } else {
                            this.$message({
                                type:"error",
                                message: res.msg
                            })
                        }
                        //新增成功后要刷新一下主页。和上面类似
                        this.load()
                        //关闭弹窗
                        this.dialogVisible = false
                    })
                }
            },
            load(){
                request.get("/staff",{
                    params:{
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=> {
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
        }
    }
</script>
